<template>
  <div>
    <div class="gva-search-box">
      <el-form ref="searchForm" :inline="true" :model="searchInfo">
        <el-form-item label="用户ID">
          <el-input v-model="searchInfo.user_id" placeholder="用户ID" />
        </el-form-item>
        <el-form-item label="交易类型">
          <el-select v-model="searchInfo.type" placeholder="请选择交易类型">
            <el-option
              v-for="item in stateOption"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="角色身份">
          <el-select v-model="searchInfo.role_type" placeholder="请选择角色身份">
            <el-option
              v-for="item in selectOption"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
          <el-button icon="refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="gva-table-box">
      <el-table :data="tableData" row-key="id">
        <el-table-column align="left" label="用户ID" min-width="150" prop="user_id" />
        <el-table-column align="left" label="用户姓名" min-width="150" prop="name" />
        <el-table-column align="left" label="交易金额" min-width="150" prop="price" />
        <el-table-column align="left" label="交易类型" min-width="150">
          <template #default="scope">
            <span>{{ displayState(scope.row.type) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="角色身份" min-width="150">
          <template #default="scope">
            <span>{{ displayrole_type(scope.row.role_type) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="交易时间" min-width="150" prop="created_at" />
      </el-table>
      <div class="gva-pagination">
        <el-pagination
          :current-page="page"
          :page-size="page_size"
          :page-sizes="[10, 30, 50, 100]"
          :total="totals"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, computed } from "vue";

import { financialRecords } from "@/api/subscribe";
import { ElMessage } from "element-plus";

let searchInfo = ref({
  user_id: "",
  phone: "",
  role_type: "",
  type: ""
});
let tableData = ref([]);
let totals = ref(0);
let page = ref(1);
let page_size = ref(10);
const rules = ref({
  role_type: [{ required: true, message: "请选择用户状态", trigger: "blur" }]
});
const selectOption = [
  {
    id: 10000,
    name: "普通用户"
  },
  {
    id: 10001,
    name: "骑手"
  },
  {
    id: 10002,
    name: "网点"
  },
  {
    id: 10003,
    name: "商家"
  }
];
const stateOption = [
  {
    id: 1,
    name: "充值"
  },
  {
    id: 2,
    name: "提现"
  },
  {
    id: 3,
    name: "支付"
  },
  {
    id: 4,
    name: "收入"
  },
  {
    id: 5,
    name: "邀请奖励"
  }
];

onMounted(() => {
  getList();
});

const displayrole_type = computed(() => {
  return val => {
    if (val === 10000) {
      return "普通用户";
    } else if (val === 10001) {
      return "骑手";
    } else if (val === 10002) {
      return "网点";
    } else if (val === 10003) {
      return "商家";
    }
  };
});
const displayState = computed(() => {
  return val => {
    console.log(val);
    if (val === 1) {
      return "充值";
    } else if (val === 2) {
      return "提现";
    } else if (val === 3) {
      return "支付";
    } else if (val === 4) {
      return "收入";
    } else if (val === 5) {
      return "邀请奖励";
    }
  };
});
const getList = () => {
  let params = {
    page: page.value,
    page_size: page_size.value,
    user_id: searchInfo.value.user_id,
    type: searchInfo.value.type,
    role_type: searchInfo.value.role_type
  };
  financialRecords(params).then(response => {
    console.log(response);
    if (response.code === 200) {
      tableData.value = response.data.rows || [];
      totals.value = response.data.total_rows || 0;
    }
  });
};
const handleCurrentChange = val => {
  page.value = val;
  getList();
};
const handleSizeChange = val => {
  page_size.value = val;
  getList();
};
const onSubmit = () => {
  page.value = 1;
  page_size.value = 10;
  getList();
};
const onReset = () => {
  searchInfo.value = {
    user_id: "",
    role_type: "",
    type: ""
  };
  page.value = 1;
  page_size.value = 10;
  totals.value = 0;
  getList();
};
</script>
<style lang="scss" scoped>
.avatar {
  width: 60px;
  height: 60px;
  margin-right: 10px;
}
</style>